/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    CCell, Cell, Input, InputLine, LineColumn, SuffixInput, Table, TableBody, TableRow, Text, TextArea,
} from "customize-easy-ui-component";
import {InspectRecordLayout, InternalItemProps, useItemInputControl,} from "../../common/base";
import {DirectLink} from "../../../routing/Link";
import {TailMenRowIspCheck} from "../../contain/rarelyVary";

//较为原始的办法做的：
interface Props  extends InternalItemProps{
    label?: string;
    titles?: any[];
}

export const checkConfig真空=[['测试仪器型号','静电测试仪器'],['仪器精度','静电测试精度'],['导静电电阻',{n:'导静电电阻',u:'Ω'}],['连接处电阻',{n:'连接处电阻',u:'Ω'}],
    ['真空仪型号','真空仪型号'],['仪器精度','真空仪精度'],['空载时真空度',{n:'空载真空度',u:'Pa'}],['承载时真空度',{n:'承载真空度',u:'Pa'}],['真空泵型号','真空泵型号'],
    ['抽真空时间',{n:'抽真空时间',u:'h'}],['罐内真空度',{n:'罐内真空度',u:'Pa'}],['置换介质','抽空置换介质'],['置换压力',{n:'抽空置换压',u:'MPa'}],
    ['排放后罐内压力',{n:'排放后压力',u:'MPa'}],['罐内气体含氧量（≤3％）','含氧量']] as any[];
export const AddonTest=
    React.forwardRef((
        { children, show ,alone=true,label='附加检验-导静电装置检查'}:Props,  ref
    ) => {
        const getInpFilter = React.useCallback((par: any) => {
            let fields={} as any;
            checkConfig真空.forEach(([ _,aName], i:number)=> {
                if (typeof aName === 'object' && aName.n && !aName.r)
                    fields[aName.n] =par[aName.n];
                else
                    fields[aName] =par[aName];
                // const namexD = `${aName}_D`;
            });
            return fields;
        }, []);
        const {inp, setInp} = useItemInputControl({ ref });
        const somepartOf =React.useCallback((part: number) => {
            const partCfg= 1===part? checkConfig真空.slice(0,4) :
                2===part? checkConfig真空.slice(4,8)
                    : checkConfig真空.slice(8);
            return <>
                <LineColumn>
                    { partCfg.map(([title,aName]: any, i:number) => {
                        let name=aName;
                        if(typeof aName === 'object' && aName.n && !aName.r)
                            name=aName.n;
                        // oldunit=unit===null? '' : unit? unit:oldunit;
                        if(typeof aName === 'object' && aName.u)
                            return <InputLine key={i} label={title+`:`}>
                                <SuffixInput  value={inp?.[name] || ''}
                                              onChange={e => setInp({...inp,[name]: e.currentTarget.value||undefined})
                                              }>{aName.u}</SuffixInput>
                            </InputLine>;
                        else return <InputLine key={i} label={title+`:`}>
                            <Input  value={inp?.[name] || ''}
                                    onChange={e => {
                                        setInp({...inp,[name]: e.currentTarget.value||undefined});
                                    } } />
                        </InputLine>;
                    }) }
                </LineColumn>
            </>;
        },[inp, setInp]);
        // {i===4 && '安全附件检验-绝热层真空度检查:'}
        // {i===8 && '安全附件检验-罐体抽真空 、气体置换:'}
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={label} column={0}>
                <Text variant="h5">{label}：</Text>
                导静电装置检查:
                { somepartOf(1) }
                绝热层真空度检查:
                { somepartOf(2) }
                罐体抽真空 、气体置换:
                { somepartOf(3) }
            </InspectRecordLayout>
        );
} );

interface CorrosiveProps  extends InternalItemProps{
    jyjg?: string;          //默认 ='存在问题'
    titles?: any[];
}
//"附加检测结果"这个字段对应的描述可能变化：若不是'存在问题'的需要注入；【做法】直接根据序号从配置数组中定位该项目；
export const checkConfig腐蚀=[['介质名称','腐蚀介质名称'], ['腐蚀介质成分','腐蚀介质成分'], ['腐蚀介质含量',{n:'腐蚀介质含量',u:'%'}],
    ['腐蚀速度',{n:'腐蚀速度',u:'mm/y'}], ['腐蚀机理','腐蚀机理'], ['其他检验、检测','附加检验其他'],
    ['备注','附加检验备注'], ['存在问题','附加检测结果']] as any[];

/**@param jyjg: 兼容性考虑，多个不同版本，这个位置的目标叙述可不一样啊。
* */
export const AddonTestCorros=
    React.forwardRef((
        { children, show ,alone=true,label='附加检验-腐蚀介质含量测定',jyjg='存在问题'}:CorrosiveProps,  ref
    ) => {
        const getInpFilter = React.useCallback((par: any) => {
            let fields={} as any;
            checkConfig腐蚀.forEach(([ _,aName], i:number)=> {
                if (typeof aName === 'object' && aName.n && !aName.r)
                    fields[aName.n] =par[aName.n];
                else
                    fields[aName] =par[aName];
            });
            return fields;
        }, []);
        const {inp, setInp} = useItemInputControl({ ref });
        return (
            <InspectRecordLayout inp={inp} setInp={setInp}  getInpFilter={getInpFilter} show={show}
                                 alone={alone}  label={label} column={0}>
                <Text variant="h5">{label}：</Text>
                腐蚀介质含量测定:
                <LineColumn>
                    { checkConfig腐蚀.map(([title,aName]: any, i:number) => {
                        if(i>4) return null;
                        let name=aName;
                        if(typeof aName === 'object' && aName.n && !aName.r)
                            name=aName.n;
                        // oldunit=unit===null? '' : unit? unit:oldunit;
                        if(typeof aName === 'object' && aName.u)
                            return <InputLine key={i} label={title+`:`}>
                                <SuffixInput  value={inp?.[name] || ''}
                                              onChange={e => setInp({...inp,[name]: e.currentTarget.value||undefined})
                                              }>{aName.u}</SuffixInput>
                            </InputLine>;
                        else return <InputLine key={i} label={title+`:`}>
                            <Input  value={inp?.[name] || ''}
                                    onChange={e => {
                                        setInp({...inp,[name]: e.currentTarget.value||undefined});
                                    } } />
                        </InputLine>;
                    }) }
                </LineColumn>
                {
                    checkConfig腐蚀.map(([title,aName], i:number)=> {
                        if(i<=4) return null;
                        //(7===i? jyjg : "附加检测结果"这个字段对应的描述可能变化：
                        return <React.Fragment key={i}>
                                {(7===i? jyjg : title) +`:`}
                                <TextArea  value={inp?.[aName] || ''} rows={i===7? 3 : 6}
                                           onChange={e => {
                                               inp[aName] = e.currentTarget.value||undefined;
                                               setInp({...inp});
                                           } } />
                        </React.Fragment>;
                    })
                }
            </InspectRecordLayout>
        );
} );

export const AddonTestVw = ({theme, orc, rep, jyjg = '存在问题'}: { theme: any, orc: any, rep: any, jyjg?: string }
) => {
    //【表格助手】 JSON.parse(orc?._tblFixed??'[]') 【拉表格列】 直接替换目标表的fixed字段 ：【修改列宽】 【调整宽度】
    return <>
        <div css={{"@media print": {paddingBottom: '4rem', pageBreakInside: 'avoid'}}}>
            <Text id='AddonTest' variant="h2" css={{
                textAlign: 'center', marginTop: '1rem',
            }}>附加检验报告</Text>
            <div css={{
                display: 'flex',
                justifyContent: 'space-between'
            }}>
                <Text>单位内部编号：{orc.单位内部编号}</Text>
                <Text>报告编号：{rep.isp.no}</Text>
            </div>
        </div>
        <Table fixed={["17%", "34%", "17%", "%"]} tight miniw={800}
               css={{borderCollapse: 'collapse', "@media print": {marginTop: '-4rem'}}}>
            <TableBody>
                <DirectLink
                    href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/AddonTest#AddonTest`}>
                    <TableRow>
                        <CCell colSpan={4}><Text css={{fontWeight: 800}}>导静电装置检查</Text></CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>测试仪器型号</CCell>
                        <CCell>{orc.静电测试仪器}</CCell>
                        <CCell>仪器精度</CCell>
                        <CCell>{orc.静电测试精度}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>导静电电阻</CCell>
                        <CCell>
                            <div css={{display: 'flex', justifyContent: 'space-around', alignItems: 'center'}}>
                                <Text>{orc.导静电电阻}</Text>
                                <Text css={{[theme.mediaQueries.lg + ', print']: {wordBreak: 'keep-all'}}}>
                                    Ω</Text>
                            </div>
                        </CCell>
                        <CCell>连接处电阻</CCell>
                        <CCell>
                            <div css={{display: 'flex', justifyContent: 'space-around', alignItems: 'center'}}>
                                <Text>{orc.连接处电阻}</Text>
                                <Text css={{[theme.mediaQueries.lg + ', print']: {wordBreak: 'keep-all'}}}>
                                    Ω</Text>
                            </div>
                        </CCell>
                    </TableRow>
                    <TableRow>
                        <CCell colSpan={4}><Text css={{fontWeight: 800}}>绝热层真空度检查</Text></CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>真空仪型号</CCell>
                        <CCell>{orc.真空仪型号}</CCell>
                        <CCell>仪器精度</CCell>
                        <CCell>{orc.真空仪精度}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>空载时真空度</CCell>
                        <CCell>
                            <div css={{display: 'flex', justifyContent: 'space-around', alignItems: 'center'}}>
                                <Text>{orc.空载真空度}</Text>
                                <Text css={{[theme.mediaQueries.lg + ', print']: {wordBreak: 'keep-all'}}}>
                                    Pa</Text>
                            </div>
                        </CCell>
                        <CCell>承载时真空度</CCell>
                        <CCell>
                            <div css={{display: 'flex', justifyContent: 'space-around', alignItems: 'center'}}>
                                <Text>{orc.承载真空度}</Text>
                                <Text css={{[theme.mediaQueries.lg + ', print']: {wordBreak: 'keep-all'}}}>
                                    Pa</Text>
                            </div>
                        </CCell>
                    </TableRow>
                </DirectLink>
            </TableBody>
        </Table>
        <Table fixed={["15%", "21%", "12%", "20%", "11%", "%"]} css={{borderCollapse: 'collapse'}} tight miniw={800}>
            <TableBody>
                <DirectLink
                    href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/AddonTest#AddonTest`}>
                    <TableRow>
                        <CCell colSpan={6}><Text css={{fontWeight: 800}}>罐体抽真空 、气体置换</Text></CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>真空泵型号</CCell>
                        <CCell>{orc.真空泵型号}</CCell>
                        <CCell>抽真空时间</CCell>
                        <CCell>
                            <div css={{display: 'flex', justifyContent: 'space-around', alignItems: 'center'}}>
                                <Text>{orc.抽真空时间}</Text>
                                <Text css={{[theme.mediaQueries.lg + ', print']: {wordBreak: 'keep-all'}}}>
                                    h</Text>
                            </div>
                        </CCell>
                        <CCell>罐内真空度</CCell>
                        <CCell>
                            <div css={{display: 'flex', justifyContent: 'space-around', alignItems: 'center'}}>
                                <Text>{orc.罐内真空度}</Text>
                                <Text css={{[theme.mediaQueries.lg + ', print']: {wordBreak: 'keep-all'}}}>
                                    Pa</Text>
                            </div>
                        </CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>置换介质</CCell>
                        <CCell colSpan={2}>{orc.抽空置换介质}</CCell>
                        <CCell>置换压力</CCell>
                        <CCell colSpan={2}>
                            <div css={{display: 'flex', justifyContent: 'space-around', alignItems: 'center'}}>
                                <Text>{orc.抽空置换压}</Text>
                                <Text css={{[theme.mediaQueries.lg + ', print']: {wordBreak: 'keep-all'}}}>
                                    MPa</Text>
                            </div>
                        </CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>排放后罐内压力</CCell>
                        <CCell colSpan={2}>
                            <div css={{display: 'flex', justifyContent: 'space-around', alignItems: 'center'}}>
                                <Text>{orc.排放后压力}</Text>
                                <Text css={{[theme.mediaQueries.lg + ', print']: {wordBreak: 'keep-all'}}}>
                                    MPa</Text>
                            </div>
                        </CCell>
                        <CCell colSpan={2}>罐内气体含氧量（≤3％）</CCell>
                        <CCell>{orc.含氧量}</CCell>
                    </TableRow>
                </DirectLink>
                <DirectLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/AddonTestCorros#AddonTestCorros`}>
                    <TableRow>
                        <CCell colSpan={6}><Text css={{fontWeight: 800}}>腐蚀介质含量测定</Text></CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>介质名称</CCell>
                        <CCell colSpan={2}>{orc.腐蚀介质名称}</CCell>
                        <CCell>腐蚀介质成分</CCell>
                        <CCell colSpan={2}>{orc.腐蚀介质成分}</CCell>
                    </TableRow>
                    <TableRow>
                        <CCell>腐蚀介质含量</CCell>
                        <CCell>
                            <div css={{display: 'flex', justifyContent: 'space-evenly', alignItems: 'center'}}>
                                <Text>{orc.腐蚀介质含量}</Text>
                                <Text css={{[theme.mediaQueries.lg + ', print']: {wordBreak: 'keep-all'}}}>
                                    %</Text>
                            </div>
                        </CCell>
                        <CCell>腐蚀速度</CCell>
                        <CCell>
                            <div css={{display: 'flex', justifyContent: 'space-around', alignItems: 'center'}}>
                                <Text>{orc.腐蚀速度}</Text>
                                <Text css={{[theme.mediaQueries.lg + ', print']: {wordBreak: 'keep-all'}}}>
                                    mm/y</Text>
                            </div>
                        </CCell>
                        <CCell>腐蚀机理</CCell>
                        <CCell>{orc.腐蚀机理}</CCell>
                    </TableRow>
                    <TableRow>
                        <Cell split={true} colSpan={6}>
                            <div css={{minHeight: '3rem', whiteSpace: 'pre-wrap'}}>其他检验、检测：<br/>
                                {orc.附加检验其他 || '／'}
                            </div>
                        </Cell>
                    </TableRow>
                    <TableRow>
                        <Cell split={true} colSpan={6}>
                            <div css={{minHeight: '2rem', whiteSpace: 'pre-wrap'}}>备注：<br/>
                                {orc.附加检验备注 || '／'}
                            </div>
                        </Cell>
                    </TableRow>
                    <TableRow>
                        <Cell split={true} colSpan={6}>
                            <div css={{minHeight: '2rem', whiteSpace: 'pre-wrap'}}>{jyjg}：<br/>
                                {orc.附加检测结果 || '／'}
                            </div>
                        </Cell>
                    </TableRow>
                </DirectLink>
            </TableBody>
        </Table>
        <TailMenRowIspCheck orc={orc} rep={rep} href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}>
        </TailMenRowIspCheck>
    </>;
};
